<template>
  <div class="audition258">
    <p>虚拟dom是用js模拟一颗dom树,放在浏览器内存中，相当于在js和真实dom中加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。</p>
    <p>优点：</p>
    <p>（1）虚拟DOM具有批处理和高效的Diff算法,最终表现在DOM上的修改只是变更的部分，可以保证非常高效的渲染,优化性能；</p>
    <p>（2）虚拟DOM不会马上进行排版与重绘操作，对虚拟DOM进行频繁修改，最后一次性比较并修改真实DOM中需要改的部分；</p>
    <p>（3）虚拟 DOM 有效降低大面积真实 DOM 的重绘与排版，因为最终与真实 DOM 比较差异，可以只渲染局部；</p>
    <p>缺点：</p>
    <p>首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢</p>
    <p>原理：</p>
    <p>1. 用 JavaScript 对象模拟真实 DOM 树，生成虚拟dom树；</p>
    <p>2. diff 算法 — 通过唯一标识key值，比较两棵虚拟 DOM 树中的差异</p>
    <p>3. pach 算法 — 将两个 DOM 对象的差异应用到真实 DOM 树。</p>
  </div>
</template>

<script>
export default {
  name: 'Audition258'
}
</script>

<style>

</style>